<template>
    <div class="container_code">
        <!-- 登录的表单 -->
        <div class="header">本次操作需要短信确认，请输入<span class="phone_text">133****8182</span>收到的短信校验码</div>
        <div class="gap"></div>
        <van-form
            v-if="active == '1' || active == '2'"
            validate-first
            @submit="onSubmit">
            <van-cell-group>
                <van-field
                    input-align="left"
                    v-model="code"
                    label="校验码"
                    placeholder="请填写校验码">
                    <button
                        :disabled="disableButton"
                        slot="button"
                        class="btn_slot"
                        @click="sentCode">
                        {{ codeStr }}
                    </button>
                </van-field>
            </van-cell-group>
            <div style="margin: 2rem">
                <van-button
                    :disabled="code.length < 4"
                    round
                    block
                    type="info"
                    native-type="submit"
                    class="loginBtn"
                    @click="nextStep"
                    >下一步</van-button
                >
                <p
                    class="tip_text"
                    @click="codeError">
                    收不到验证码？
                </p>
            </div>
        </van-form>
    </div>
</template>
<script>
import { Notify } from 'vant';
export default {
    data() {
        return {
            loginForm: {},
            active: '1',
            code: '',
            codeStr: '发送验证码', //重发
            countdown: 59,
            disableButton: false,
        };
    },
    methods: {
        onSubmit() {},
        // 发送验证码
        sentCode() {
            this.disableButton = true; // 禁用按钮
            this.codeStr = this.countdown + ' 秒后重新发送'; // 开始倒计时
            console.log('Sending verification code...');
            this.$http
                .post('/get/code')
                .then(res => {
                    const { success, data, msg } = res.data;
                    Notify({ type: success ? 'success' : 'warning', message: msg });
                    if (success) {
                        this.startCountdown(); //倒计时
                    }
                })
                .catch(err => {});
        },
        startCountdown() {
            const countdownTimer = setInterval(() => {
                if (this.countdown === 0) {
                    clearInterval(countdownTimer);
                    this.countdown = 59;
                    this.codeStr = '重发验证码'; // 重置倒计时文本
                    this.disableButton = false; // 重新启用按钮
                } else {
                    this.countdown--;
                    this.codeStr = this.countdown + ' 秒后重新发送';
                }
            }, 1000);
        },
        // 收不到验证码
        codeError() {
            console.log('收不到点击了！');
        },
        // 点击下一步
        nextStep() {
            this.$http
                .post('/get/code', { code: this.code })
                .then(res => {
                    const { success, data, msg } = res.data;
                    Notify({ type: success ? 'success' : 'warning', message: msg });
                    if (success) {
                        this.$router.push({
                            name: 'OrderClose',
                        });
                    }
                })
                .catch(err => {});
        },
    },
    beforeDestroy() {
        if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
        }
    },
};
</script>
<style scoped lang="scss">
.container_code {
    .header {
        padding: 3rem 4rem;
        color: gray;
        .phone_text {
            color: #020202;
        }
    }
    .gap {
        height: 1.5rem;
        background-color: rgb(245, 245, 245);
        border: 1px solid #ddd;
        border-right: none;
        border-left: none;
    }
    .btn_slot {
        color: rgb(61, 126, 217);
        border: none;
        background: #fff;
        text-align: right;
    }
    .tip_text {
        color: rgb(61, 126, 217);
    }
}
.van-button--normal {
    font-size: 1.2rem;
}
</style>
